<template>
  <!-- 直播统计 -->
  <div class="liveStatistics">
    <div class="title">
      <img src="../assets/img/直播统计title.png" alt="" />
    </div>
    <ul>
      <li v-for="(v, i) in this.liveList" :key="i">
        <div class="left">
          <div class="font12">{{ v.name }}</div>
          <p class="font12 userIcon" v-show="v.liveStatus == 1">
            <img src="../assets/img/用户.png" alt="" />
            用户数：<span>{{ v.pv }}</span>
          </p>
        </div>
        <div class="right" v-show="v.liveStatus == 1">
          <div class="flex">
            <img :src="img" alt="" />
            <div class="font12 nowLive">正在直播</div>
          </div>
          <p class="font12 userIcon">
            <img src="../assets/img/购物车.png" alt="" />
            成交额：<span>￥{{ v.gmv }}</span>
          </p>
        </div>
        <div class="right" v-show="v.liveStatus == 0">
          <div class="flex">
            <div class="font12">
              距直播开始 [ {{ liveListTime[i].hours }}:{{
                liveListTime[i].minutes
              }}:{{ liveListTime[i].seconds }} ]
            </div>
          </div>
        </div>
        <div class="right" v-show="v.liveStatus == 2">
          <div class="flex">
            <div class="font12">已结束</div>
          </div>
          <p class="font12 userIcon">
            <img src="../assets/img/购物车.png" alt="" />
            成交额：<span>￥{{ v.gmv }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
export default {
  props: {
    type: {
      default: 0,
    },
  },
  data() {
    return {
      imgList: [
        require("../assets/img/living1.png"),
        require("../assets/img/living2.png"),
        require("../assets/img/living3.png"),
        require("../assets/img/living4.png"),
      ],
      index: 0,
      oTimer: null,
      img: require("../assets/img/living1.png"),
      liveList: [], //直播列表
      liveListTime: [], //用于直播时间倒计时
      nowTime: 0, //当前时间
      curTime: null,
      hours: "00",
      minutes: "00",
      seconds: "00",
      totalAxios: null,
      timerCur: null,
    };
  },
  created() {
    if (this.type == 1) {
      getRequest(url.outLive).then((res) => {
        if (res.data.code == "000000") {
          if (res.data.content.rooms.length != 0) {
            this.liveList = res.data.content.rooms;
            this.liveListTime = res.data.content.rooms;
            this.nowTime = res.data.content.rooms[0].nowTime;
            this.countDownInit();
            this.getTime();
          }
        }
      });
    } else {
      getRequest(url.innerLive).then((res) => {
        if (res.data.code == "000000") {
          if (res.data.content.rooms.length != 0) {
            this.liveList = res.data.content.rooms;
            this.liveListTime = res.data.content.rooms;
            this.nowTime = res.data.content.rooms[0].nowTime;
            this.countDownInit();
            this.getTime();
          }
        }
      });
    }
    this.intervalAxios();
  },
  mounted() {
    this.$nextTick(() => {
      this.run();
    });
  },
  methods: {
    run() {
      this.oTimer = setTimeout(this.getImg(), 6000);
      clearTimeout(this.oTimer); //清除定时器
    },
    getImg() {
      for (let i = this.index; i < this.imgList.length; i++) {
        this.fun(i);
      }
    },
    fun(i) {
      let that = this;
      return setInterval(function () {
        that.img = that.imgList[that.random(0, 3)];
        that.index++;
      }, 200);
    },
    random(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
    // 获取直播
    async getLiveInfo() {
      if (this.type == 1) {
        let res = await getRequest(url.outLive);
        if (res.data.code == "000000") {
          this.liveList = res.data.content.rooms;
          if (this.liveList.length != 0) {
            this.nowTime = this.liveList[0].nowTime;
          // this.countDownInit();
          // this.getTime();
          }
        }
      } else {
        let res = await getRequest(url.innerLive);
        if (res.data.code == "000000") {
          this.liveList = res.data.content.rooms;
          if (this.liveList.length != 0) {
            this.nowTime = this.liveList[0].nowTime;
          // this.countDownInit();
          // this.getTime();
          }
        }
      }
    },
    // 获取当前时间
    countDownInit() {
      this.curTime = setInterval(() => {
        this.nowTime = this.nowTime + 1000;
      }, 1000);
    },
    // 2s请求一次
    intervalAxios() {
      this.totalAxios = setInterval(() => {
        this.getLiveInfo();
      }, 4000);
    },
    // 计算时间
    getTime() {
      this.timerCur = setInterval(() => {
        let hours = 0;
        let minutes = 0;
        let seconds = 0;
        this.liveListTime.map((obj, index) => {
          this.liveList.map((item) => {
            if (obj.liveStatus == 0) {
              if (this.liveListTime[index].startTimeStamp - this.nowTime > 0) {
                hours = Math.floor(
                  ((this.liveListTime[index].startTimeStamp - this.nowTime) /
                    1000 /
                    60 /
                    60) %
                    24
                );
                // 判断小时是否大于24小时
                if (
                  this.liveListTime[index].startTimeStamp - this.nowTime >
                  86400000
                ) {
                  let num = parseInt(
                    (this.liveListTime[index].startTimeStamp - this.nowTime) /
                      86400000
                  );
                  hours = num * 24 + hours;
                }
                minutes = Math.floor(
                  ((this.liveListTime[index].startTimeStamp - this.nowTime) /
                    1000 /
                    60) %
                    60
                );
                seconds = Math.floor(
                  ((this.liveListTime[index].startTimeStamp - this.nowTime) /
                    1000) %
                    60
                );
                if (hours < 10) {
                  hours = "0" + hours;
                }
                if (minutes < 10) {
                  minutes = "0" + minutes;
                }
                if (seconds < 10) {
                  seconds = "0" + seconds;
                }
              } else {
                hours = "00";
                minutes = "00";
                seconds = "00";
              }
              this.$set(obj, "hours", hours);
              this.$set(obj, "minutes", minutes);
              this.$set(obj, "seconds", seconds);
            }
          });
        });
      }, 1000);
    },
  },
  destroyed() {
    clearInterval(this.totalAxios);
    clearInterval(this.curTime);
    clearInterval(this.oTimer);
    clearInterval(this.timerCur);
  },
};
</script>

<style lang="less" scoped>
.liveStatistics {
  margin: 39px 0 0 0;
  .title {
    img {
      width: 363px;
      height: 39px;
    }
  }
  ul {
    li {
      width: 414px;
      height: 84px;
      background: url("../assets/img/直播场次bg.png") no-repeat center;
      margin: 16px 0;
      padding: 0 17px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        height: 84px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .font12 {
          color: #f4f4f4;
        }
        .userIcon {
          color: #00d0ff;
          span {
            font-weight: bold;
          }
        }
      }
      .right {
        height: 84px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-evenly;
        .font12 {
          color: #f4f4f4;
        }
        .nowLive {
          color: #ff791a;
        }
        .flex {
          display: flex;
        }
        .userIcon {
          color: #00d0ff;
          span {
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>